<style>
    .layui-form-item .layui-input-company {width: auto;padding-right: 10px;line-height: 38px;}
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div class="layui-form layuimini-form">

            <div class="layui-form-item">
                <label class="layui-form-label required" >所属栏目</label>
                <div class="layui-input-block">
                    <select name="cate_id" lay-filter="aihao">
                        <option value=""></option>
                        {{range .cate}}
                        <option value="{{.Id}}" {{if eq $.news.Cate.Id .Id}}selected {{end}}>{{.CateName}}</option>
                        {{end}}
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">文章标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" value="{{.news.Title}}"  lay-verify="required" lay-reqtext="文章标题不能为空" placeholder="请输入文章标题"   class="layui-input">
                </div>

            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">简短标题</label>
                <div class="layui-input-block">
                    <input type="text" name="short_title" value="{{.news.ShortTitle}}"  placeholder="请输入简短标题"   class="layui-input">
                </div>

            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">跳转地址</label>
                <div class="layui-input-block">
                    <input type="text" name="url" value="{{.news.Url}}"  placeholder="请输入跳转地址"   class="layui-input">
                </div>

            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">关键字</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入关键字" value="{{.news.Keys}}" name="keys" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">会员头像</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="test1">上传图片</button>
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="demo1" style="width: 92px;height:92px" src="{{.news.Pic}}">
                            <p id="demoText"></p>
                            <input type="hidden" name="pic" id="picd">
                            <input type="hidden" name="oldpic" value="{{.news.Pic}}">
                        </div>
                    </div>
                </div>

            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label required">文章简介</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入文章简介"  lay-verify="required" lay-reqtext="文章简介不能为空" name="mark" class="layui-textarea">{{.news.Mark}}</textarea>
                </div>
            </div>


            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label required">文章内容</label>
                <div class="layui-input-block">
                    <div id="editor" style="margin: 50px 0 50px 0">

                    </div>
                    <input type="hidden" id="content"  name="content" value="{{.news.Content}}">
                </div>
            </div>



            <div class="layui-form-item">
                <label class="layui-form-label">是否置顶</label>
                <div class="layui-input-block">
                    <input type="checkbox"  name="is_top"  {{if eq .news.IsTop 1}}checked {{end}}  lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">是否审核</label>
                <div class="layui-input-block">
                    <input type="checkbox"  name="is_active"  {{if eq .news.IsActive 1}}checked {{end}}   lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
                </div>
            </div>

            <div class="layui-form-item">
                <input type="hidden" name="Id" value="{{.news.Id}}">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="setting">确认保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form','jquery','upload',"wangEditor"], function () {
        var form = layui.form
            , layer = layui.layer
            ,upload = layui.upload
            ,$ = layui.jquery
            ,wangEditor = layui.wangEditor;

        var editor = new wangEditor('#editor');
        editor.customConfig.uploadImgServer = "../api/upload.json";
        editor.customConfig.uploadFileName = 'image';
        editor.customConfig.pasteFilterStyle = false;
        editor.customConfig.uploadImgMaxLength = 5;
        editor.customConfig.uploadImgShowBase64 = true
        editor.customConfig.showLinkImg = false
        editor.customConfig.uploadImgHooks = {
            // 上传超时
            timeout: function (xhr, editor) {
                layer.msg('上传超时！')
            },
            // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
            customInsert: function (insertImg, result, editor) {
                console.log(result);
                if (result.code == 1) {
                    var url = result.data.url;
                    url.forEach(function (e) {
                        insertImg(e);
                    })
                } else {
                    layer.msg(result.msg);
                }
            }
        };
        editor.customConfig.customAlert = function (info) {
            layer.msg(info);
        };
        editor.create();
        editor.txt.html("{{.news.Content}}")

        //图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: 'https://httpbin.org/post' //改成您自己的上传接口
            ,exts: 'jpg|png|jpeg' //只允许上传压缩文件
            ,accept: 'file' //普通文件
            ,size: 60 //限制文件大小，单位 KB
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                    $("#picd").val(result)
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });


        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        //监听提交
        form.on('submit(setting)', function (data) {
            data.field.content = editor.txt.html();
            //获取
            ajaxs("/sys/UpdateNew",data.field,function(res){
                layer.msg(res["Msg"], function () {
                    layer.closeAll()
                });
            },function(res){
                layer.msg(res["Msg"]);
            })
        });

    });
</script>